<template>
  <transition name="bounce" mode="out-in">
    <section class="mui-content pd">
      <mh-header headName="开通会员"> </mh-header>
      <div class="banner">
        <img src="../../assets/images/bg/bg_p_member.png" alt="banner">
      </div>
      <div class="product">
        <div class="product-item flex-bt">
          <div class="pro-left flex">
            <span class="pro-time">12个月</span>
            <div class="pro-info">
              <p><span class="price">￥2598</span><span class="origin-pri">￥3456</span></p>
              <p class="pro-tip">包含人工牵线</p>
            </div>
          </div>
          <div class="peo-right">
            <button type="button" class="btn-buy" @click='toPay(2598)'>购买</button>
          </div>
        </div>
        <div class="product-item flex-bt">
          <div class="pro-left flex">
            <span class="pro-time">6个月</span>
            <div class="pro-info">
              <p><span class="price">￥1598</span><span class="origin-pri">￥2456</span></p>
              <p class="pro-tip">包含人工牵线</p>
            </div>
          </div>
          <div class="peo-right">
            <button type="button" class="btn-buy" @click='toPay(1598)'>购买</button>
          </div>
        </div>
        <div class="product-item flex-bt">
          <div class="pro-left flex">
            <span class="pro-time">3个月</span>
            <div class="pro-info">
              <p><span class="price">￥998</span><span class="origin-pri">￥1256</span></p>
              <p class="pro-tip">包含人工牵线</p>
            </div>
          </div>
          <div class="peo-right">
            <button type="button" class="btn-buy" @click='toPay(998)'>购买</button>
          </div>
        </div>

        <div class="privilege">
          <h4>特权介绍</h4>
          <p>1.支付成功后，即可尊享红娘专业服务。</p>
          <p>2.享受3-5个同等级匹配对象服务，红娘会与双方取得联系，双方均同意线下会面的即为约会成功。有效期满后，牵线次数自动清零。</p>
          <p>3.红娘负责双方联系，安排会面事宜，并就双方牵线过程中出现的问题提供专业服务。在约会结束后，及时了解约会反馈，按照您的意愿安排进一步交往或制定新的约会计划。</p>
          <p>4.若需要匹配比自己等级高的对象，需购买与对方相对应的等级服务。</p>
          <p>5.服务有效期4个月。</p>
          <p>6.服务一经开通，不予以退款，敬请谅解。</p>
        </div>
      </div>
    </section>
  </transition>
</template>

<script>
  import MhHeader from '@/components/mh-header/mh-header'
  export default {
    name: "join-member",
    components: {
      MhHeader
    },
    methods:{
      toPay(num){
        this.$router.push({
          path: '/pay',
          query: {
            num: num
          }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import "../../assets/css/mixin";
  .banner {
    width: 100%;
    img {width: 100%}
  }
  .product {padding-bottom: 1rem}
  .product-item {
    margin: 1rem;
    padding: 1.5rem;
    background-color: #fff;
    border-radius: .5rem;
    box-shadow: .2rem .2rem .65rem rgba(0,0,0,.2);
    .pro-time {
      margin-right: 2rem;
      @include sc(1.5rem, #333)
    }
    .price {@include sc(1.5rem, #f26c60)}
    .origin-pri {
      @include sc(1.2rem, #999);
      text-decoration: line-through;
    }
    .pro-tip {@include sc(1.2rem, #999);}
  }
  .btn-buy {
    padding: .4rem 1.5rem;
    border-radius: 1.2rem;
    @include sc(1.2rem, #fff);
    background: linear-gradient(180deg, #dd65a1 30%, #fa625a 100%);
  }
  .privilege {
    margin: 0 1rem;
    padding: 1.5rem;
    border-radius: .5rem;
    background-color: #fff;
    h4 {
      font-size: 1.5rem;
      font-weight: bold;
      background: linear-gradient(90deg, #dd65a1 30%, #fa625a 100%);
      -webkit-background-clip: text;
      color: transparent;
    }
    p {margin-top: 1.5rem;@include sc(1.2rem, #666);}
  }
</style>
